<template>
  <div class="view-combox">
    <div class="groupList subnav2">
      <ul class="group-ul">
        <li class="f16 font-black" style="font-weight:500">分组</li>
        <li>
          <span
            :style="'color:'+(nowGroup == 0  ? '#3878F5' : '')"
            class="group-name"
            @click.stop="select('0')"
          >全部列表</span>
        </li>
        <li v-for="(item,index) in groupList" :key="index">
          <span
            :style="'color:'+ (nowGroup == item.id  ? '#3878F5' : '')"
            class="group-name"
            @click.stop="select(item.id)"
          >{{item.name}}</span> &nbsp;
          <span class="count-bubble" v-if="item.count>0">{{item.count}}</span>
        </li>
      </ul>
    </div>
    <div class="scrollbox">
      <v-header
        :menus="[{key: 1, value: '已审'}, {key: 0, value: '待审'}, {key: 2, value: '退回'}]"
        @selected="selectMenu"
        :ifbage="false"
      ></v-header>
      <div class="listbox aps9">
        <v-list
          api="flow_img.get_list"
          ref="list"
          :cols="cols"
          :params="params"
          @flag="ifListSelectAll"
          @afterFetchData="listType = 'list'"
        >
          <template slot="search">
            <el-button
              @click.stop="editPop"
              class="operate"
              size="mini"
              type="primary"
              icon="el-icon-plus"
            >新建</el-button>
            <span class="inblock" style="width: 60px;">
              <groupTpl
                class="inblock-span"
                :autoStatus="false"
                autoVal="请选择分组"
                autoId
                ftype="text"
                v-on:selected="onSelGroup"
                autoApi="flow_img_group.get_list"
                :autoParm="autoHostParams"
                fname="name"
                fkey="id"
                @group="groupFetchData"
                @groupid="addToGroup"
                @initGrouplist="groupFetchData"
              ></groupTpl>
            </span>
            <span class="fr" style="margin-right: 15px;">
              <el-button
                @click.stop="listType = 'list'"
                class="el-icon-menu"
                size="mini"
                :type="listType=='list' ? 'primary' : 'text'"
              ></el-button>
              <el-button
                @click.stop="openFlowImg"
                class="el-icon-s-data"
                size="mini"
                :type="listType=='img' ? 'primary' : 'text'"
              ></el-button>
            </span>
          </template>
          <template slot="head" slot-scope="props">
            <thead>
              <tr>
                <th class="c1">
                  <input ref="listInputAll" type="checkbox" @click.stop="$refs.list.selAll" />
                </th>
                <th class="tc" style="padding-left: 30px;">状态</th>
                <th>
                  名称
                  <i
                    :class="props.filter.orderby == 'CONVERT(fi.name USING GBK)|desc' ? 'el-icon-arrow-up': 'el-icon-arrow-down'"
                    @click.stop="$refs.list.setOrderby('name','fi')"
                  ></i>
                </th>
                <th>
                  创建人
                  <i
                    :class="props.filter.orderby == 'fi.dateline|desc' ? 'el-icon-arrow-up': 'el-icon-arrow-down'"
                    @click.stop="$refs.list.setOrderby('dateline','fi')"
                  ></i>
                </th>
                <th>
                  审核人
                  <i
                    :class="props.filter.orderby == 'pa.sh_dateline|desc' ? 'el-icon-arrow-up': 'el-icon-arrow-down'"
                    @click.stop="$refs.list.setOrderby('sh_dateline','pa')"
                  ></i>
                </th>
                <th>操作</th>
              </tr>
            </thead>
          </template>
          <template slot="item" slot-scope="props">
            <tr>
              <td>
                <input
                  type="checkbox"
                  v-model="props.item.choose"
                  @click.stop="props.item.choose=!props.item.choose;$refs.list.ifSelectAll($event,props.item)"
                />
              </td>
              <td class="tc" style="padding-left: 30px;">
                <span
                  style="font-size:14px"
                  :class="flow_statusColor[props.item.status]"
                >{{flowImgStatus[props.item.status]}}</span>&nbsp;
                <span
                  style="font-size:10px;-webkit-text-size-adjust:none;"
                  class="font-gray"
                  v-if="props.item.status!=1"
                >[{{statusType[props.item.type]}}]</span>
              </td>
              <td>
                <a
                  href="javascript:void(0)"
                  @click.stop="rowClick(props.item)"
                  class="f14 font-blue"
                >{{props.item.name}}</a>
                <div class="dis5"></div>
                <span class="font-gray f12">客户:</span>
                {{props.item.client_name}}
                <div class="dis5"></div>
                <span v-if="props.item.bz" class="font-gray f12">备注:</span>
                {{props.item.bz}}
              </td>
              <td>
                {{props.item.creator_uname}}
                <br />
                <span class="font-gray2">{{props.item.dateline | dateFormat('yyyy-MM-dd HH:mm')}}</span>
              </td>
              <td>
                <span v-if="props.item.sh_dateline">
                  {{props.item.sh_uname}}
                  <br />
                  <span
                    class="font-gray2"
                  >{{props.item.sh_dateline | dateFormat('yyyy-MM-dd HH:mm')}}</span>
                </span>
              </td>
              <td class="tr">
                <div class="rl">
                  <template v-if="opId == props.item.id">
                    <div class="batch-op-row">
                      <el-button
                        size="mini"
                        icon="el-icon-edit"
                        type="primary"
                        circle
                        @click.stop="editPop(props.item)"
                      ></el-button>
                      <el-button
                        size="mini"
                        icon="el-icon-delete"
                        type="danger"
                        @click.stop="del(props.item)"
                      >删除</el-button>
                      <el-button
                        v-if="props.item.status!=1"
                        size="mini"
                        icon="el-icon-s-check"
                        type="default"
                        @click.stop="sh(props.item)"
                      >审核</el-button>
                      <el-button
                        icon="el-icon-arrow-right"
                        type="default"
                        circle
                        @click.stop="opId=0"
                        size="mini"
                      ></el-button>
                    </div>
                  </template>
                  <template v-else>
                    <el-button
                      size="mini"
                      icon="el-icon-edit"
                      type="primary"
                      circle
                      @click.stop="editPop(props.item)"
                    ></el-button>
                    <el-button
                      icon="el-icon-more"
                      size="mini"
                      type="default"
                      circle
                      @click.stop="opId=props.item.id"
                    ></el-button>
                  </template>
                </div>
              </td>
            </tr>

            <tr v-show="listType == 'img'" class="imgTr">
              <td colspan="6">
                <div class="viewbox-body">
                  <v-graph_tool @change="filter => changGraphFilter(filter,props.item)"></v-graph_tool>
                  <table class="table table-list">
                    <colgroup>
                      <col />
                      <col width="70px" />
                    </colgroup>
                    <tbody>
                      <tr v-for="(elem ,index) in props.item.chooseParseList" :key="index">
                        <td style="padding-left: 55px">
                          <div
                            style="cursor:pointer;display:inline-block;"
                            slot="reference"
                            class="font-black f12"
                          >
                            <el-tag
                              type="primary"
                              size="mini"
                              v-if="elem['port_id'].indexOf(',') > 0"
                              effect="dark"
                            >合</el-tag>
                            &nbsp;{{elem.title}}
                            <span
                              class="el-icon-edit imgedit"
                              @click.stop="editImg(elem,elem.sort,'list',index)"
                            ></span>
                            <!-- <span class="el-icon-edit imgedit"></span> -->
                            <div class="dis5"></div>

                            <div class="graph-list-box">
                              <v-graph
                                :ref="'graph' +props.item.id + index"
                                :api="elem.api"
                                :params="elem.params"
                                @sendimg="getimg"
                                @imgs="imgs"
                                @echarts="showEcharts"
                                @portDateInfo="portDate"
                              ></v-graph>
                              <div class="dis5"></div>
                              <div class="tc">
                                <div
                                  @click.stop="changeGraphNode(props.item,index, n)"
                                  v-for="(n, i) in elem.node_ids"
                                  :key="i"
                                  class="node-tag"
                                >
                                  <span class="font-gray2">节点</span>
                                  <span
                                    :class="n.node_id==elem.params.node_id ? 'fb font-blue': ''"
                                  >{{ n.node_id }}</span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </td>
                        <td></td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </td>
            </tr>
          </template>
        </v-list>
      </div>

      <!-- edit -->
      <el-dialog
        :show-close="true"
        :close-on-click-modal="false"
        title="新增/修改流量图"
        :visible.sync="editData.status"
        @close="$refs.edit.initForm()"
        top="5vh"
        width="90%"
      >
        <editTpl ref="edit" :id="editData.id" @closeDialog="closeDialog"></editTpl>
        <div slot="footer" class="tc"></div>
      </el-dialog>
      <!-- end edit -->

      <!-- <popTpl :imgForm="imgForm" :viewDatas="viewData"></popTpl> -->

      <!-- view dialog start-->
      <el-dialog
        :show-close="false"
        :close-on-click-modal="true"
        title="修改流量图"
        :visible.sync="flowimgData.status"
        @close="flowimgData.status = false"
        top="30vh"
        width="650px"
      >
        <div style="padding: 0 20px;">
          <el-form :model="imgForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="端口名">
              <el-input v-model="imgForm.title"></el-input>
            </el-form-item>
            <el-form-item label="流量图名">
              <el-input v-model="imgForm.graph_title"></el-input>
            </el-form-item>
            <el-form-item label="排序">
              <el-input v-model="imgForm.sort"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer" class="tr">
          <el-button type="primary" size="mini" @click.stop="saveImg()">保存</el-button>
          <el-button type="default" size="mini" @click.stop="cancelImg">取消</el-button>
        </div>
      </el-dialog>
      <!-- view dialog end-->

      <!-- show -->
      <v-popup
        class="pop outside"
        ref="popup1"
        :visible="viewData.status"
        width="820px"
        :title="viewData.title"
        icon="el-icon-close"
        @close="viewData.status = false"
      >
        <viewTpl
          ref="view"
          :data="viewData.id"
          @sendimg="getimg"
          @editImg="editImg"
          @imgs="imgs"
          @echarts="showEcharts"
          @portDateInfo="portDate"
        ></viewTpl>
      </v-popup>
      <!-- end show -->

      <!-- show -->
      <v-popup
        refs="popup2"
        :visible="viewDatax.status"
        width="1120px"
        title="详情流量图"
        icon="el-icon-arrow-left"
        @close="viewDatax.status = false"
        :class="viewDatax.status  ? 'outside' : ''"
      >
        <img :src="imgDetail" alt="详情流量图" />
      </v-popup>

      <!-- 所有端口流量图 -->
      <v-popup
        refs="popup3"
        :visible="viewDataAll.status"
        width="850px"
        title="单端口流量图"
        icon="el-icon-arrow-left"
        @close="viewDataAll.status = false"
        :class="viewDataAll.status ? 'outside;' : '' + 'portsPop'"
      >
        <div class="exportLoading" v-if="isExporting">
          <span>数据正在导出中...</span>
          <span class="el-icon-loading"></span>
        </div>
        <table class="table table-list portsTable" style="margin-top: -30px">
          <colgroup>
            <col width="40px" />
            <col />
          </colgroup>
          <thead style="background-color:#f8f8f8;">
            <td>
              <input ref="inputAll" type="checkbox" @click.stop="selectAllPorts($event)" />
            </td>
            <td class>
              <el-button
                type="primary"
                class="fr"
                style="margin-right:80px;"
                size="mini"
                @click.stop="portsExport"
              >批量导出</el-button>
              <a ref="eExport" class="fr" @click.stop="dowmload(portsExportSrc)"></a>
            </td>
          </thead>
          <tbody>
            <tr v-for="(item ,index) in portImgs" :key="index">
              <td>
                <input type="checkbox" v-model="item.choose" />
              </td>
              <td>
                <v-graph api="cacti.get_port_image" :params="item" @echarts="showEcharts"></v-graph>
                <div class="dis10"></div>
                <div style="padding-left:300px">
                  <span
                    style="padding:4px 6px;border: 1px #DCDFE6 solid; font-size: 12px; color:#999999"
                  >节点&nbsp;{{item.node_id}}</span>
                </div>
                <div class="dis20"></div>
              </td>
            </tr>
          </tbody>
        </table>
      </v-popup>
      <!-- end show -->

      <!-- 端口echart图 -->
      <v-popup
        refs="popup4"
        :visible="viewChart.status"
        width="1100px"
        title="ECHARTS图"
        icon="el-icon-arrow-left"
        @close="viewChart.status = false"
        :class="viewChart.status ? 'outside' : ''"
      >
        <div>
          <v-echarts ref="echarts" id="echarts-img" :option="viewChart.option"></v-echarts>
          <div class="dis20"></div>
          <table
            cellspacing="0"
            style="margin:0 auto;width:70%;"
            cellpadding="0"
            class="table"
            v-if="viewChart.data && viewChart.data.in"
          >
            <tr>
              <td>
                <b>外网IN</b>
              </td>
              <td>
                带宽入日均峰值:
                <b class="am-text-primary" style="color:#06e106;">{{viewChart.data.in.avg}}</b>&nbsp;&nbsp;&nbsp;
              </td>
              <td>
                带宽入峰值:
                <b class="am-text-primary" style="color:#06e106;">{{viewChart.data.in.max}}</b>
              </td>
              <td>
                带宽入95%值:
                <b
                  class="am-text-primary"
                  style="color:#b87413;"
                >{{viewChart.data.in.value_95.v95}}</b>&nbsp;&nbsp;&nbsp;
              </td>
            </tr>

            <tr>
              <td>
                <b>外网OUT</b>
              </td>
              <td>
                带宽出日均峰值:
                <b class="am-text-primary" style="color:#0d3fc0;">{{viewChart.data.out.avg}}</b>&nbsp;&nbsp;&nbsp;
              </td>
              <td>
                带宽出峰值:
                <b class="am-text-primary" style="color:#0d3fc0;">{{viewChart.data.out.max}}</b>
              </td>
              <td>
                带宽出95%值:
                <b
                  class="am-text-primary"
                  style="color:#b81313;"
                >{{viewChart.data.out.value_95.v95}}</b>&nbsp;&nbsp;&nbsp;
              </td>
            </tr>
          </table>
          <div class="dis20"></div>
          <!-- 流量图列表数据 -->
          <div>
            <table class="graphTable" border>
              <thead>
                <tr>
                  <td rowspan="2">日期</td>
                  <td colspan="6" class="font-blue" style="font-weight: 700">出流量</td>
                  <td colspan="6" class="font-blue" style="font-weight: 700">入流量</td>
                </tr>
                <tr>
                  <td>最大值</td>
                  <td>最小值</td>
                  <td>95值</td>
                  <td>日均峰值</td>
                  <td>平均流量</td>
                  <td>
                    NAN
                    <span style="font-size: 8px;color:gray">(个)</span>
                  </td>
                  <td>最大值</td>
                  <td>最小值</td>
                  <td>95值</td>
                  <td>日均峰值</td>
                  <td>平均流量</td>
                  <td>
                    NAN
                    <span style="font-size: 8px;color:gray">(个)</span>
                  </td>
                </tr>
              </thead>
              <tbody>
                <tr class="font-org" style="font-weight: 700">
                  <td>当月统计</td>
                  <td>{{tableListOut.max}}</td>
                  <td>{{tableListOut.min}}</td>
                  <td>{{tableListOut['value_95'].v95 }}</td>
                  <td>{{tableListOut.max_avg}}</td>
                  <td>{{tableListOut.avg}}</td>
                  <td>{{tableListOut.nan}}</td>
                  <td>{{tableListIn.max}}</td>
                  <td>{{tableListIn.min}}</td>
                  <td>{{tableListIn['value_95'].v95}}</td>
                  <td>{{tableListIn.max_avg}}</td>
                  <td>{{tableListIn.avg}}</td>
                  <td>{{tableListIn.nan}}</td>
                </tr>
                <tr v-for="(item,i) in tableListOut.data" :key>
                  <td>{{i}}</td>
                  <td>{{item.max}}</td>
                  <td>{{item.min}}</td>
                  <td>{{item.v95}}</td>
                  <td>-</td>
                  <td>{{item.avg}}</td>
                  <td>{{item.nan}}</td>
                  <td>{{tableListIn.data[i].max}}</td>
                  <td>{{tableListIn.data[i].min}}</td>
                  <td>{{tableListIn.data[i].v95}}</td>
                  <td>-</td>
                  <td>{{tableListIn.data[i].avg}}</td>
                  <td>{{tableListIn.data[i].nan}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </v-popup>
      <!-- end show -->

      <el-dialog
        :show-close="true"
        :close-on-click-modal="true"
        title="审核"
        :visible.sync="shData.status"
        top="20vh"
        width="60%"
      >
        <!-- 审批弹窗 -->
        <v-audit :sh_id="sh_id" :title="shData.title" @close="closedialog"></v-audit>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { default as editTpl } from "./tpl/edit";
import { default as viewTpl } from "./tpl/view";
import { default as groupTpl } from "./tpl/group";
// import { default as popTpl } from "./tpl/pop"
import clickoutside from "@lib/clickoutside";
import cache from "@cache";
export default {
  components: {
    editTpl,
    // popTpl,
    viewTpl,
    groupTpl
  },
  directives: {
    clickoutside
  },
  watch: {
    portImgs: {
      handler(val) {
        if (this.$refs.inputAll) {
          this.$refs.inputAll.checked = true;
          val.forEach(item => {
            if (item.choose == false) {
              this.$refs.inputAll.checked = false;
            }
          });
        }
      },
      deep: true
    }
  },
  data() {
    return {
      firstTimeToList: false,
      listType: "list",
      nowGroup: "0",
      isExporting: false,
      portsExportSrc: "",
      menus: [],
      crow: {},
      statusType: {},
      cols: "30,120,0,150,150,120",
      params: {
        orderby: "CONVERT(fi.name USING GBK)|asc",
        status: 1,
        group_id: 0
      },
      opId: 0,
      flowImgStatus: {},
      editData: { status: false, id: 0 },
      viewData: { status: false, id: 0, title: "" },
      viewDatax: { status: false, id: 0 },
      viewDataAll: { status: false }, //所有单端口流量
      viewChart: { status: false, option: {}, data: {} },
      flowimgData: { status: false, data: {} },
      imgDetail: "",
      flow_statusColor: {
        "0": "font-red",
        "1": "font-green",
        "2": "font-gray"
      },
      imgForm: {
        img_id: 0,
        md5: "",
        graph_title: "",
        title: "",
        sort: -1
      },
      md5: "",
      portImgs: [],
      sh_id: -1,
      shData: { status: false, data: {}, title: "审批操作" },
      tableListIn: {
        value_95: {
          v95: ""
        }
      },
      tableListOut: {
        value_95: {
          v95: ""
        }
      },
      autoHostParams: {
        //分组参数
      },
      groupId: 0,
      choosedExportList: [],
      groupList: [],
      imgParams: {}
    };
  },
  methods: {
    changeGraphNode(props, index, item) {
      //选中显示对应节点流量图
      let that = this;
      props.chooseParseList[index].params["node_id"] = item["node_id"];
      props.chooseParseList[index].params["port_id"] = item["port_id"];
      that.$refs["graph" + props.id + index][0].fetchImg();
    },
    changGraphFilter(filter, items) {
      let that = this;
      that.imgParams = filter;
      that.$refs.list.data.list.forEach((item, index) => {
        if (item.id == items.id) {
          item.chooseParseList.forEach(elem => {
            for (let i in filter) {
              elem.params[i] = filter[i];
            }
          });
        }
        that.$refs["graph" + items.id + index][0].fetchImg();
      });
    },
    openFlowImg() {
      this.listType = "img";
      if (!this.$refs.list.data.list[0].chooseParseList) {
        this.parseChoose();
      }
    },
    parseChoose() {
      //初始化列表数据----取流量图
      let tmp = {};
      this.$refs.list.data.list.forEach(item => {
        item.items.forEach(elem => {
          if (!tmp[elem.md5]) {
            let type = elem.port_id.indexOf(",") > 0 ? 1 : 0;
            tmp[elem.md5] = {
              title: elem.title,
              node_ids: [
                {
                  node_id: elem.node_id,
                  port_id: elem.port_id,
                  title: elem.graph_title || elem.title
                }
              ],
              img_id: elem.img_id,
              md5: elem.md5,
              node_id: elem.node_id,
              port_id: elem.port_id,
              params: {
                node_id: elem.node_id,
                port_id: elem.port_id,
                type: type,
                graph_title: elem.graph_title || elem.title,
                bit_multi: 1,
                base: 1000,
                nan_95th: 1
              },
              api: type ? "cacti.get_merge_port_image" : "cacti.get_port_image"
            };
          } else {
            tmp[elem.md5].node_ids.push({
              node_id: elem.node_id,
              port_id: elem.port_id,
              title: elem.title,
              bit_multi: 1,
              base: 1000,
              nan_95th: 1
            });
          }
        });
        let chooseParseList = [];
        for (let i in tmp) {
          chooseParseList.push(tmp[i]);
          //this.$set(this.chooseParseList, i, tmp[i])
        }
        this.$set(item, "chooseParseList", chooseParseList);
      });
    },
    select(id) {
      this.nowGroup = id;
      this.params["group_id"] = id;
    },
    dowmload(url) {
      //批量导出下载
      window.open(url, "_self");
    },
    ifListSelectAll(val) {
      //监听list页是不是全选
      this.$refs.listInputAll.checked = val;
    },
    selectAllPorts(e) {
      //所有单端口全选
      this.portImgs.forEach(item => {
        this.$set(item, "choose", e.target.checked);
      });
    },
    portsExport() {
      //批量导出
      let arr = [];
      this.isExporting = true;
      // console.log(this.portImgs,99)
      this.portImgs.forEach(item => {
        if (item.choose) {
          arr.push(item);
        }
      });
      if (arr.length < 1) {
        this.$error("请选择端口进行数据导出");
        return;
      } else {
        let str = "";
        arr.forEach((item, index) => {
          if (index == arr.length - 1) {
            str += item.port_id;
          } else {
            str += item.port_id + ",";
          }
        });
        let param = {
          node_id: arr[0].node_id,
          port_id: str,
          start_time: arr[0].graph_start,
          end_time: arr[0].graph_end,
          base: arr[0].base,
          bit_multi: arr[0].bit_multi,
          title: arr[0].title
        };
        this.$api.get("cacti.export_each_port_data", param).then(res => {
          if (res.status === 1) {
            this.isExporting = false;
            this.portsExportSrc = res.data;
            this.dowmload(this.portsExportSrc);
          }
        });
      }
    },
    addToGroup(val) {
      //流量图添加进分组
      let str = "";
      this.$refs.list.data.list.forEach(item => {
        if (item.choose) {
          str += item.id + ",";
        }
      });
      if (str.indexOf(",") < 0) {
        this.$error("请先选择要进行分组的流量图");
        return;
      }
      let arr2 = str.split(",");
      if (arr2.length == 2) {
        str = arr2[0];
      } else {
        arr2.pop();
        str = arr2.join(",");
      }
      this.$api
        .get("flow_img.change_group", { img_id: str, group_id: val })
        .then(res => {
          if (res.status === 1) {
            this.$success("添加成功");
            this.groupFetchData();
          }
        });
    },
    onSelGroup(key, val, item) {
      //选择分组
      // this.groupId = item.id;
      this.params["group_id"] = item.id;
    },
    portDate(val) {
      //组件传值--时间数据
      this.tableListIn = val.in;
      this.tableListOut = val.out;
    },
    handleClickOutSide1() {
      if (this.opId) {
        this.opId = "";
      }
    },
    handleClickOutSide2() {
      // if (this.viewChart.status) {
      //   this.viewChart.status = false;
      //   return false;
      // }
      // if (this.viewDataAll.status) {
      //   this.viewDataAll.status = false;
      //   return false;
      // }
      // if (this.viewDatax.status) {
      //   this.viewDatax.status = false;
      //   return false;
      // }
      // if (this.viewData.status) {
      //   if (!this.flowimgData.status) {
      //     this.viewData.status = false;
      //   }
      //   return false;
      // }
    },
    closedialog() {
      this.shData.status = false;
      this.$refs.list.fetchData();
    },
    sh(item) {
      this.$api.get("flow_img.get_detail", { id: item.id }).then(res => {
        if (res.status == 1) {
          this.sh_id = res.data.img.sh_id;
          this.shData.status = true;
        }
      });
    },
    imgs(val) {
      //接收所有单端口流量数据
      this.portImgs = val;
      this.portImgs.forEach(item => {
        this.$set(item, "choose", false);
      });
      this.viewDataAll.status = true;
    },
    saveImg() {
      this.imgForm["md5"] = this.md5;
      this.$api.get("flow_img.update_title_sort", this.imgForm).then(res => {
        if (res.status === 1) {
          if (this.imgForm.list == "list") {
            // this.$refs[
            //   "graph" + this.imgForm.img_id + this.imgForm.index
            // ][0].fetchImg();
            this.$refs.list.fetchData();
            setTimeout(() => {
              this.openFlowImg();
            }, 400);
          } else {
            this.$refs.view.fetchData();
          }
          this.flowimgData.status = false;
        }
      });
    },
    cancelImg() {
      this.flowimgData.status = false;
    },
    editImg(item, sort, list, numIndex) {
      // console.log(this.$refs.list.data.list[numIndex],numIndex)
      this.imgForm.graph_title = item.params.graph_title;
      this.imgForm.title = item.title;
      this.imgForm.img_id = item.img_id;
      this.imgForm.item = item;
      if (numIndex || numIndex == "0") {
        this.imgForm.index = numIndex;
        this.imgForm.sort = this.$refs.list.data.list[numIndex].items[0].sort;
      } else {
        this.imgForm.sort = sort;
      }
      this.md5 = item.md5;
      this.flowimgData.status = true;
      if (list == "list") {
        this.imgForm.list = "list";
      }
    },
    parseFlowUnit(v, vbase) {
      let unit = v.substr(-1);
      if (unit == "G") {
        return parseFloat(v);
      } else if (unit == "M") {
        return Math.round(parseFloat(v / vbase), 2);
      } else if (unit == "K") {
        return Math.round(parseFloat(v / vbase / vbase), 2);
      }
    },
    showEcharts(val, valbase) {
      if (!val || !val.in) {
        return false;
      }
      this.viewChart.data = val;
      let unit = "";
      let category = [];
      let inv = [];
      let outv = [];
      let inavg = [];
      let outavg = [];
      let inv95 = [];
      let outv95 = [];

      let inavg_n = this.parseFlowUnit(val.in.avg, valbase);
      let inv95_n = this.parseFlowUnit(val.in.value_95.v95, valbase);
      let outavg_n = this.parseFlowUnit(val.out.avg, valbase);
      let outv95_n = this.parseFlowUnit(val.out.value_95.v95, valbase);

      for (let i in val.in.data) {
        for (let j in val.in.data[i].data) {
          category.push(val.in.data[i].time[j]);
          inv.push(
            Math.round(val.in.data[i].data[j] / valbase / valbase / valbase, 2)
          );
          inavg.push(parseFloat(inavg_n));
          inv95.push(parseFloat(inv95_n));
        }
      }
      for (let i in val.out.data) {
        for (let j in val.out.data[i].data) {
          outv.push(
            Math.round(val.out.data[i].data[j] / valbase / valbase / valbase, 2)
          );
          outavg.push(parseFloat(outavg_n));
          outv95.push(parseFloat(outv95_n));
        }
      }
      this.viewChart.status = true;
      this.viewChart.option = {
        title: {
          text: "流量分析"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["出流量", "入流量", "出均值", "入均值", "出95值", "入95值"]
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: category
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "{value} G"
            }
          }
        ],
        color: [
          "#06e106",
          "#0d3fc0",
          "#418ee4",
          "#5f8b00",
          "#b81313",
          "#b87413"
        ],
        series: [
          {
            name: "入流量",
            type: "line",
            //stack: '总量',
            areaStyle: { normal: {} },
            data: inv,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            }
          },
          {
            name: "出流量",
            type: "line",
            //stack: '总量',
            //areaStyle: {normal: {}},
            data: outv,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            }
          },
          {
            name: "出均值",
            type: "line",
            data: outavg,
            lineStyle: {
              normal: {
                type: "dashed"
              }
            }
          },
          {
            name: "入均值",
            type: "line",
            data: inavg,
            lineStyle: {
              normal: {
                type: "dashed"
              }
            }
          },
          {
            name: "出95值",
            type: "line",
            data: outv95,
            lineStyle: {
              normal: {
                type: "dashed"
              }
            }
          },
          {
            name: "入95值",
            type: "line",
            data: inv95,
            lineStyle: {
              normal: {
                type: "dashed"
              }
            }
          }
        ]
      };
      if (this.$refs.echarts) {
        this.$refs.echarts.draw();
      }
    },
    getimg(val) {
      this.imgDetail = val;
      this.viewDatax.status = true;
    },
    closeDialog() {
      this.editData.status = false;
      this.$refs.list.fetchData();
      this.groupFetchData();
    },
    editPop(item) {
      this.editData.status = true;
      this.editData.id = item.id;
    },
    selectMenu(item) {
      this.listType = "list";
      this.nowGroup = "0";
      this.$refs.list.filter.page = 1;
      this.setParams("status", item.key);
      this.groupFetchData();
    },
    setParams(key, value) {
      this.params[key] = value;
    },
    rowClick(item, status_name) {
      this.popStatusInit();
      this.viewData.status = true;
      this.viewData.id = item.id;
      this.viewData.title = item.name;
      // this.$refs.view.tabName = "port";
    },
    popStatusInit() {
      this.viewDatax.status = false;
      this.viewDataAll.status = false;
      this.viewChart.status = false;
      this.flowimgData.status = false;
      this.shData.status = false;
    },
    del(row) {
      let that = this;
      that
        .$confirm("此操作会将项目标记为删除，不可恢复, 是否继续?", "删除提醒")
        .then(() => {
          that.$api.post("flow_img.del_img", { id: row.id }).then(res => {
            if (res.status === 1) {
              that.$success(res.msg);
              that.$refs.list.fetchData();
            } else {
              that.$error(res.msg);
            }
          });
        });
    },
    groupFetchData() {
      this.$api
        .get("flow_img_group.get_list", { status: this.params.status })
        .then(res => {
          this.groupList = res.data.list;
        });
    }
  },
  mounted() {
    this.flowImgStatus = cache.get("erpConfig")["flow_img_status"];
    this.statusType = cache.get("erpConfig")["sh_type"];
    for (let i in this.flowImgStatus) {
      let obj = { key: i, value: this.flowImgStatus[i] };
      if (i == -1) {
        this.menus.unshift(obj);
      } else {
        this.menus.push(obj);
      }
    }
    this.groupFetchData();
  }
};
</script>
<style lang="scss" scoped>
.inblock-span {
  position: absolute;
  top: 1px;
  left: 0px;
}
.groupList {
  background-color: white;
  padding-top: 50px;
  padding-left: 30px;
  height: 100%;
  overflow: auto;
}
.groupList .group-ul li {
  color: #7d8c91;
  font-weight: 400;
  font-size: 12px;
  height: 40px;
  line-height: 40px;
}
.groupList .group-ul .group-name {
  cursor: pointer;
  display: inline-block;
  max-width: 82px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.group-ul .count-bubble {
  padding: 1px 6px;
  background-color: #7d8c91a1;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: white;
}

.pop /deep/ .pop_content {
  padding-top: 10px !important;
}
.graphTable {
  width: 100%;
  margin: 0 auto;
  border: 1px solid #dcdfe6;
  margin: 0;
  border-collapse: collapse;
  border-spacing: 0;
}

.graphTable td {
  padding: 5px 0px;
  text-align: center;
  font-size: 13px;
}

.tdP {
  display: inline-block;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exportLoading {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  text-align: center;
  line-height: 500px;
  font-size: 18px;
  font-weight: 700;
  // color: white;
  height: 100%;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.096);
}
.graph-tool-box {
  padding: 0 55px !important;
  background-color: white !important;
}
.imgTr:hover .graph-tool-box {
  background-color: transparent !important;
}
.imgTr td {
  padding: 0px;
}
.imgTr td td {
  padding: 25px 0;
}
</style>
